<template>
	<view style="padding-bottom: 30rpx;">
		<view class="total-price text-center">
			<label class="margin-xl">总金额</label>{{totalPrice.toFixed(2)}}
		</view>
		<view class="car-items">
			<view :style="item.selected?'border:#FBCB11 3rpx solid;':''" class="car-item" v-for="(item, i) in categories" @tap="selectBlock(item)">
				<view class="left fl margin-lg" :style="item.selected?'color:#FBCB11;':''">{{item.title}}</view>
				<view class="right fr margin-lg text-price" :style="item.selected?'color:#FBCB11;':''">{{(fullPrice * item.percent).toFixed(2)}}</view>
				<view class="clearfix"></view>
				<image class="partimg" :src="'/static/'+item.img"></image>
			</view>			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				brand: '',
				carmodel: '',
				product: '',
				model: 16,
				channel: 54,
				fullPrice: 38000,
				totalPrice:0.00,
				categories:[{
					title: '整车',
					img: 'price_full.png',
					percent: 1,
					selected: false
				}],
				categoriesGroups:{
					16:[{
						title: '整车',
						img: 'price_full.png',
						percent: 1,
						selected: false
					},{
						title: '前杠',
						img: 'price_front.png',
						percent: 0.12,
						selected: false
					},{
						title: '后杠',
						img: 'price_back.png',
						percent: 0.12,
						selected: false
					},{
						title: '机盖',
						img: 'price_jigai.png',
						percent: 0.15,
						selected: false
					},{
						title: '右前叶子板',
						img: 'price_yqyzb.png',
						percent: 0.08,
						selected: false
					},{
						title: '左前叶子板',
						img: 'price_zqyzb.png',
						percent: 0.08,
						selected: false
					},{
						title: '右后叶子板',
						img: 'price_yhyzb.png',
						percent: 0.15,
						selected: false
					},{
						title: '左后叶子板',
						img: 'price_zhyzb.png',
						percent: 0.15,
						selected: false
					},{
						title: '右门组合',
						img: 'price_rightdoor.png',
						percent: 0.13,
						selected: false
					},{
						title: '左门组合',
						img: 'price_leftdoor.png',
						percent: 0.13,
						selected: false
					},{
						title: '右侧裙',
						img: 'price_zcq.png',
						percent: 0.03,
						selected: false
					},{
						title: '左侧裙',
						img: 'price_ycq.png',
						percent: 0.03,
						selected: false
					},{
						title: '后盖组合',
						img: 'price_hg.png',
						percent: 0.1,
						selected: false
					},{
						title: '后视镜',
						img: 'price_mirror.png',
						percent: 0.03,
						selected: false
					}],
					19:[{
						title: '整车',
						img: 'price_full.png',
						percent: 1,
						selected: false
					}],
					20:[{
						title: '整车',
						img: 'price_full.png',
						percent: 1,
						selected: false
					},{
						title: '前杠',
						img: 'price_front.png',
						percent: 0.12,
						selected: false
					},{
						title: '后杠',
						img: 'price_back.png',
						percent: 0.12,
						selected: false
					},{
						title: '机盖',
						img: 'price_jigai.png',
						percent: 0.15,
						selected: false
					},{
						title: '右前叶子板',
						img: 'price_yqyzb.png',
						percent: 0.08,
						selected: false
					},{
						title: '左前叶子板',
						img: 'price_zqyzb.png',
						percent: 0.08,
						selected: false
					},{
						title: '右后叶子板',
						img: 'price_yhyzb.png',
						percent: 0.15,
						selected: false
					},{
						title: '左后叶子板',
						img: 'price_zhyzb.png',
						percent: 0.15,
						selected: false
					},{
						title: '右门组合',
						img: 'price_rightdoor.png',
						percent: 0.13,
						selected: false
					},{
						title: '左门组合',
						img: 'price_leftdoor.png',
						percent: 0.13,
						selected: false
					},{
						title: '右侧裙',
						img: 'price_zcq.png',
						percent: 0.03,
						selected: false
					},{
						title: '左侧裙',
						img: 'price_ycq.png',
						percent: 0.03,
						selected: false
					},{
						title: '后盖组合',
						img: 'price_hg.png',
						percent: 0.1,
						selected: false
					},{
						title: '后视镜',
						img: 'price_mirror.png',
						percent: 0.03,
						selected: false
					}]
				},				
			}
		},
		onLoad(option) {
			this.brand = option.brand;
			this.carmodel = option.carmodel;
			this.product = option.prod;
			this.model = parseInt(option.model);
			this.channel = parseInt(option.channel);
			uni.setNavigationBarTitle({
			　　title:this.brand + ' ' + this.carmodel + ' ' + this.product
			});
			this.categories = this.categoriesGroups[this.model];
			console.log(this.categories);
			this.getPrice();
		},
		methods: {
			async getPrice(){
				//先获取车辆类型
				let res1 = await this.$api.getArchives({
					model: 22,
					channel: 58,
					condition: "`car_brand` = '" + this.brand + "' AND `car_model` = '" + this.carmodel + "'"
				});
				if(res1.code){
					if(res1.data.archivesList.length > 0){
						let cartype = res1.data.archivesList[0].car_type;//得到车辆类型数据
						//使用车辆类型数据和产品数据查询价格
						let res = await this.$api.getArchives({
							model:this.model,
							channel:this.channel,
							condition:"`car_type` in ('" + cartype + "', '全部') AND `product_type` = '" + this.product + "'"
						});
						if(res.code){
							if(res.data.archivesList.length > 0){
								this.fullPrice = parseFloat(res.data.archivesList[0].full_price);
							}
							else{
								uni.showToast({
									title:'没有对应的车辆报价数据',
									icon:'none'
								});
							}
						}
					}
					else{
						uni.showToast({
							title:'没有对应的车辆类型数据',
							icon:'none'
						});
					}
				}
			},
			
			selectBlock(item){
				item.selected = !item.selected;
				if(item.title=='整车'){
					//取消所有其它选择
					for(let it in this.categories){
						if(this.categories[it].title != '整车'){
							this.categories[it].selected = false;
						}
					}
				}
				else{
					this.categories[0].selected = false;
				}
				//计算总数
				this.totalPrice = 0;
				for(let it in this.categories){
					if(this.categories[it].selected){
						this.totalPrice += (this.categories[it].percent * this.fullPrice);
					}
				}
			}
		}
	}
</script>

<style>
	page{
		background-color: #FFFFFF;
	}
</style>

<style scoped lang="scss">
	.total-price{
		color: red;
		height: 90upx;
		width:100%;
		line-height: 100upx;
		background-color: #F7F7F7;
		position:fixed;
		top:var(--window-top);
		z-index: 1000;
		margin-bottom: 32rpx;
	}
	.car-items{
		/* height: 1200upx; */
		margin-top: 132upx;
	}
	.car-item{
		/* margin: 0 0 1rpx 0; */
		margin: 32rpx;
		color: #323233;
		height: 450rpx;
		background-color: #EBEBEB;
		border: 2rpx solid #A5A5A5;
	}
	
	.content{
		margin-top: 150upx;
		margin-left: 100upx;
	}
	
	.partimg{
		zoom: 0.5;
		margin: 0 auto;
		display: block;
	}
</style>
